<template>
    <view class="root">
        <view class="orderInfo">
            <label class="title">
                <image
                    class="icon-complete"
                    src="/static/images/icon-complete.png"
                />
                <text>{{ orderInfo.status }}</text>
            </label>
            <label class="remark">
                {{
                    `${orderInfo.carType} ${orderInfo.driver} 提供本次服务 全程${orderInfo.mileage}${orderInfo.duration}`
                }}
            </label>

            <label class="price">
                <text class="amount">{{ orderInfo.price }}</text>
                <text class="unit">元</text>
            </label>

            <label v-if="orderInfo.startingFee" class="option">
                <text>起步费</text>
                <text>{{ orderInfo.startingFee }}元</text>
            </label>
            <label v-if="orderInfo.discount" class="option">
                <text>优惠券抵扣</text>
                <text>{{ orderInfo.discount }}元</text>
            </label>
            <label class="option">
                <text>支付方式</text>
                <text>{{ orderInfo.paymentMethod }}</text>
            </label>

            <label class="driver-info">
                <image
                    class="avatar"
                    :src="orderInfo.avatarUrl"
                    mode="aspectFill"
                />
                <text>
                    {{
                        `${orderInfo.carType} ${orderInfo.driver} ${orderInfo.numberPlate}`
                    }}
                </text>
            </label>
        </view>
        <label class="dividing-line" />
        <view class="reviews">
            <label class="title">司机服务点评</label>
            <view class="stars">
                <image
                    v-for="(n, index) in 5"
                    :key="n"
                    class="icon-star"
                    mode="aspectFill"
                    :src="`/static/images/icon-star${
                        index >= orderInfo.star ? '' : '_'
                    }.png`"
                    @click="star(index)"
                />
            </view>
        </view>
    </view>
</template>

<script lang="ts">
    import Vue from "vue";
    import Component from "vue-class-component";
    import { OrderInfo } from "@/common/api";

    @Component
    export default class CompleteOrder extends Vue {
        orderInfo: OrderInfo = {
            id: 0,
            status: "",
            carType: "",
            driver: "",
            avatarUrl: "",
            mileage: "",
            duration: "",
            price: "",
            startingFee: "",
            paymentMethod: "",
            numberPlate: "",
            star: 0,
        };
        order_id: number = 0;

        private onLoad({ order_id }: { order_id: string }): void {
            this.order_id = +order_id;
            uni.showLoading({ title: "Loading..." });
            this.request
                .get(`/api/orderDetail?order_id=${order_id}`)
                .then(({ data }) => {
                    uni.hideLoading();
                    this.orderInfo = data;
                });
        }

        public star(index: number): void {
            if (this.orderInfo.star) return;

            this.request
                .get(`/api/orderStar?order_id=${this.order_id}&star=${index + 1}`)
                .then((res) => {
                    this.orderInfo.star = index + 1;
                    uni.showToast({ title: "反馈成功" });
                });
        }
    }
</script>

<style lang="scss" scoped>
    .root {
        > .orderInfo {
            margin: 30rpx;
            > .title {
                color: #1b1b1b;
                font-size: 36rpx;
                .icon-complete {
                    width: 50rpx;
                    height: 50rpx;
                    margin-right: 18rpx;
                }
            }
            > .remark {
                margin-left: 68rpx;
                margin-top: 15rpx;
                color: #999;
                font-size: 24rpx;
            }
            > .price {
                margin: 80rpx auto 40rpx;
                color: #1b1b1b;
                align-items: baseline;
                .amount {
                    font-size: 82rpx;
                }
                .unit {
                    font-size: 30rpx;
                    margin-left: 0.2em;
                }
            }
            > .option {
                justify-content: space-between;
                height: 70rpx;
                font-size: 28rpx;
                color: #1b1b1b;
            }
            > .driver-info {
                margin: 77rpx 0 50rpx;
                .avatar {
                    width: 50rpx;
                    height: 50rpx;
                    border-radius: 50%;
                    margin-right: 16rpx;
                }
                text {
                    font-size: 28rpx;
                    color: #1b1b1b;
                }
            }
        }
        > .dividing-line {
            height: 1rpx;
            background-color: #bfbfbf;
        }
        > .reviews {
            margin: 50rpx 30rpx;
            .title {
                font-size: 36rpx;
                color: #1b1b1b;
                &::after {
                    content: "匿名";
                    font-size: 18rpx;
                    margin-left: 10rpx;
                    padding: 5rpx;
                    border-radius: 8rpx;
                    border: 1rpx solid #bfbfbf;
                }
            }
            .stars {
                flex-direction: row;
                .icon-star {
                    width: 55rpx;
                    height: 55rpx;
                    margin-right: 44rpx;
                    margin-top: 60rpx;
                }
            }
        }
    }
</style>